 <template>
 	<view class="container">
 		<!-- 自定义导航栏 -->
 		<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
 			<view class="nav-back" @click="goBack">
 				<text class="back-icon">‹</text>
 			</view>
 			<view class="nav-title">优惠券</view>
 			<view class="nav-right">
 				<text class="nav-icon">⋯</text>
 				<text class="nav-icon">◎</text>
 			</view>
 		</view>

 		<scroll-view scroll-y class="content-scroll">
 			<view class="coupon-list">
 				<view class="coupon-card" v-for="(coupon, index) in couponList" :key="index"
 					@click="useCoupon(coupon)">
 					<view class="coupon-left">
 						<view class="coupon-type">{{ coupon.type }}</view>
 						<view class="coupon-condition">{{ coupon.condition }}</view>
 						<view class="coupon-divider"></view>
 						<view class="coupon-validity">有效期至: {{ coupon.validity }}</view>
 					</view>
 					<view class="coupon-right">
 						<view class="coupon-amount">
 							<text class="currency">¥</text>
 							<text class="amount">{{ coupon.amount }}</text>
 						</view>
 						<view class="coupon-action">去使用 ></view>
 					</view>
 				</view>
 			</view>
 		</scroll-view>
 	</view>
 </template>

 <script>
 	export default {
 		data() {
 			return {
 				statusBarHeight: 0,
 				couponList: [{
 						type: '仅限于加油站使用',
 						condition: '满200元可用',
 						validity: '2020.04.11—2023.05.11',
 						amount: 15
 					},
 					{
 						type: '通用',
 						condition: '满300元可用',
 						validity: '2020.04.11—2023.05.11',
 						amount: 20
 					},
 					{
 						type: '仅限于军用',
 						condition: '满400元可用',
 						validity: '2020.04.11—2023.05.11',
 						amount: 100
 					}
 				]
 			};
 		},
 		onLoad() {
 			const systemInfo = uni.getSystemInfoSync();
 			this.statusBarHeight = systemInfo.statusBarHeight;
 		},
 		methods: {
 			goBack() {
 				uni.navigateBack();
 			},
 			useCoupon(coupon) {
 				// 选择优惠券后返回上一页
 				const pages = getCurrentPages();
 				const prevPage = pages[pages.length - 2];
 				if (prevPage) {
 					prevPage.$vm.couponDiscount = coupon.amount;
 				}
 				uni.navigateBack();
 			}
 		}
 	};
 </script>

 <style scoped>
 	.container {
 		width: 100%;
 		height: 100vh;
 		background-color: white;
 		display: flex;
 		flex-direction: column;
 	}

 	.custom-nav {
 		height: 44px;
 		display: flex;
 		align-items: center;
 		background-color: #4A90E2;
 		position: relative;
 	}

 	.nav-back {
 		width: 44px;
 		height: 44px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}

 	.back-icon {
 		color: white;
 		font-size: 32px;
 		font-weight: bold;
 		line-height: 44px;
 	}

 	.nav-title {
 		flex: 1;
 		text-align: center;
 		color: white;
 		font-size: 18px;
 		font-weight: 500;
 	}

 	.nav-right {
 		width: 88px;
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
 		padding-right: 15px;
 	}

 	.nav-icon {
 		color: white;
 		font-size: 20px;
 		margin-left: 10px;
 	}

 	.content-scroll {
 		flex: 1;
 		padding: 5px;
 		background-color: white;
 	}

 	.coupon-list {
 		display: flex;
 		flex-direction: column;
 	}

 	.coupon-card {
 		background: linear-gradient(to right, #FF8C42, #FF6B35);
 		border-radius: 10px;
 		padding: 20px;
 		margin-bottom: 15px;
 		display: flex;
 		position: relative;
 		overflow: hidden;
 	}

 	.coupon-card::before,
 	.coupon-card::after {
 		content: '';
 		position: absolute;
 		width: 20px;
 		height: 20px;
 		background-color: white;
 		border-radius: 50%;
 		left: -10px;
 	}

 	.coupon-card::before {
 		top: 50%;
 		transform: translateY(-50%);
 	}

 	.coupon-card::after {
 		bottom: 50%;
 		transform: translateY(50%);
 	}

 	.coupon-left {
 		flex: 1;
 		color: white;
 	}

 	.coupon-type {
 		font-size: 12px;
 		margin-bottom: 10px;
 		opacity: 0.9;
 	}

 	.coupon-condition {
 		font-size: 16px;
 		font-weight: bold;
 		margin-bottom: 10px;
 	}

 	.coupon-divider {
 		width: 100%;
 		height: 1px;
 		border-top: 1px dashed rgba(255, 255, 255, 0.5);
 		margin: 10px 0;
 	}

 	.coupon-validity {
 		font-size: 12px;
 		opacity: 0.9;
 	}

 	.coupon-right {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		padding-left: 20px;
 		border-left: 1px dashed rgba(255, 255, 255, 0.5);
 		margin-left: 20px;
 	}

 	.coupon-amount {
 		display: flex;
 		align-items: baseline;
 		margin-bottom: 10px;
 	}

 	.currency {
 		font-size: 20px;
 		font-weight: bold;
 	}

 	.amount {
 		font-size: 36px;
 		font-weight: bold;
 	}

 	.coupon-action {
 		font-size: 12px;
 		opacity: 0.9;
 	}
 </style>